<div id="app">
    <div class="form-group price">
        <label class="col-sm-2 control-label">商品价格</label>
        <div class="col-sm-10 col-xs-12">
            <div class="input-group">
                <span class="input-group-addon">现价</span>
                <input type="text" name="market_price" id="market_price" class="form-control valid" :disabled="has_option" v-model="one_input.option_marketprice" aria-invalid="false">
                <span class="input-group-addon">元 原价</span>
                <input type="text" name="product_price" id="product_price" class="form-control valid" :disabled="has_option" v-model="one_input.option_productprice" aria-invalid="false">
                <span class="input-group-addon">元 成本</span>
                <input type="text" name="cost_price" id="cost_price" class="form-control valid" :disabled="has_option" v-model="one_input.option_costprice" aria-invalid="false">
                <span class="input-group-addon">元 库存</span>
                <input type="number" name="stock" id="stock" class="form-control hasoption" v-model="one_input.option_stock" :disabled="has_option">
            </div>
            <span class="help-block">尽量填写完整，有助于于商品销售的数据分析</span>
        </div>
    </div>
<div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
        <div class="input-group">
            <span class="input-group-addon">编码</span>
            <input type="text" name="goods_sn" id="goods_sn" class="form-control hasoption" :disabled="has_option" v-model="one_input.option_goodssn">
            <span class="input-group-addon">条码</span>
            <input type="text" name="product_sn" id="product_sn" class="form-control hasoption" :disabled="has_option" v-model="one_input.option_productsn">
            <span class="input-group-addon">重量</span>
            <input type="number" name="weight" id="weight" class="form-control hasoption" :disabled="has_option" v-model="one_input.option_weight">
            <span class="input-group-addon">克</span>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">库存</label>
    <div class="col-sm-8">
        <div class="pretty p-default">
            {if(empty($model))}
            <input type="checkbox" name="is_show_total" class="minimal" value="1">
            {else /}
            <input type="checkbox" name="is_show_total" class="minimal" value="1" {if(1 == $model['is_show_total'])}checked{/if}>
            {/if}
            <div class="state p-info-o">
                <label>显示库存</label>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">库存策略</label>
    <div class="col-sm-8">
        {volist name="goodsStockCnf" id="v"}
        <div class="pretty p-default p-round">
            {if(empty($model))}
            <input type="radio" name="stock_cnf" class="minimal" value="{$key}" {if(empty($key))}checked{/if}>
            {else /}
            <input type="radio" name="stock_cnf" class="minimal" value="{$key}" {if($model['stock_cnf'] == $key)}checked{/if}>
            {/if}
            <div class="state p-info-o">
                <label>{$v}</label>
            </div>
        </div>
        {/volist}
    </div>
</div>
<div class="form-group">
    <div class="region-goods-right col-sm-12">
        <div class="form-group">
            <div class="col-sm-11" style="padding-left:30px;padding-top:10px;">
                <div class="pretty p-default">
                    <input type="checkbox" name="has_option" class="minimal" value="1" v-model="has_option">
                    <div class="state p-info-o">
                        <label>启用商品规格</label>
                    </div>
                </div>
                <span class="help-block">启用商品规格后，商品的价格及库存以商品规格为准,库存设置为0则会到”已售罄“中，手机也不会显示, -1为不限制</span>
            </div>
        </div>

        <div id="tboption" style="padding-left:15px;" v-show="has_option">
            <div class="alert alert-info">
                1. 拖动规格可调整规格显示顺序, 更改规格及规格项后请点击下方的【刷新规格项目表】来更新数据。<br>
                2. 每一种规格代表不同型号，例如颜色为一种规格，尺寸为一种规格，如果设置多规格，手机用户必须每一种规格都选择一个规格项，才能添加购物车或购买。
            </div>
            <div id="specs" class="ui-sortable">
                <draggable :options="{animation:300}" v-model="specs">
                <div class="spec_item" v-for="(spec,si) in specs">
                    <div style="border:1px solid #e7eaec;padding:10px;margin-bottom: 10px;">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <div class="input-group">
                                    <input type="text" class="form-control  spec_title" v-model="spec.title" placeholder="规格名称 (比如: 颜色)">
                                    <div class="input-group-btn">
                                        <a href="javascript:;" specid="3" class="btn btn-info add-specitem" @click="addSpecItem(spec)"><i class="fa fa-plus"></i> 添加规格项</a>
                                        <a href="javascript:void(0);" class="btn btn-danger" @click="delSpec(si)"><i class="fa fa-remove"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <div class="spec_item_items ui-sortable">
                                    <draggable :options="{animation:300,handle:'.fa-arrows'}" v-model="specs[si].items">
                                        <div class="spec_item_item"  v-for="(item,ii) in spec.items" style="float:left;margin:5px;width:250px; position: relative">
                                                <div class="input-group">
                                                <span class="input-group-addon">
                                                    <div class="pretty p-default p-thick">
                                                        <input type="checkbox" class="minimal" value="" v-model="item.show">
                                                        <div class="state p-info-o">
                                                            <label></label>
                                                        </div>
                                                    </div>
                                                </span>
                                                    <input type="text" class="form-control spec_item_title" v-model="item.title">

                                                    <span class="input-group-addon">
                                                    <a href="javascript:;" @click="delSpecItem(spec,ii)" title="删除"><i class="fa fa-times"></i></a>
                                                    <a href="javascript:;" class="fa fa-arrows" title="拖动调整显示顺序"></a>
                                                </span>
                                                </div>

                                        </div>
                                    </draggable>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </draggable>
            </div>
            <table class="table">
                <tbody><tr>
                    <td>
                        <h4>
                            <a href="javascript:;" class="btn btn-primary" :disabled="specs.length >= 5" @click="addSpec()" style="margin-top:10px;margin-bottom:10px;" title="添加规格">
                                <i class="fa fa-plus"></i> 添加规格
                            </a>
                            <a href="javascript:;" @click="refreshOptions()" title="刷新规格项目表" class="btn btn-primary"><i class="fa fa-refresh"></i> 刷新规格项目表</a>
                        </h4>
                    </td>
                </tr>
                </tbody>
            </table>
            <div id="options" style="padding:0;">
                <table class="table table-bordered table-condensed table-hover">
                    <thead>
                    <tr class="active">
                        <th v-for="(spec,si) in specs">{{ spec.title }}</th>
                        <th>
                            <div class="">
                                <div style="padding-bottom:10px;text-align:center;">库存</div>
                                <div class="input-group">
                                    <input type="text" class="form-control input-sm option_stock_all" v-model="batchInput.option_stock">
                                    <span class="input-group-addon" @click="setCol('option_stock');">
                                        <a href="javascript:;" class="fa fa-angle-double-down" title="批量设置"></a>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="type-4">
                            <div class="">
                                <div style="padding-bottom:10px;text-align:center;">现价</div>
                                <div class="input-group">
                                    <input type="text" class="form-control  input-sm option_marketprice_all" v-model="batchInput.option_marketprice">
                                    <span class="input-group-addon" @click="setCol('option_marketprice');">
                                        <a href="javascript:;" class="fa fa-angle-double-down" title="批量设置"></a>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="type-4">
                            <div class="">
                                <div style="padding-bottom:10px;text-align:center;">原价</div>
                                <div class="input-group">
                                    <input type="text" class="form-control input-sm option_productprice_all" v-model="batchInput.option_productprice">
                                    <span class="input-group-addon" @click="setCol('option_productprice');">
                                        <a href="javascript:;" class="fa fa-angle-double-down" title="批量设置"></a>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th class="type-4">
                            <div class="">
                                <div style="padding-bottom:10px;text-align:center;">成本价</div>
                                <div class="input-group">
                                    <input type="text" class="form-control input-sm option_costprice_all" v-model="batchInput.option_costprice">
                                    <span class="input-group-addon" @click="setCol('option_costprice');">
                                        <a href="javascript:;" class="fa fa-angle-double-down" title="批量设置"></a>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th>
                            <div class="">
                                <div style="padding-bottom:10px;text-align:center;">编码</div>
                                <div class="input-group">
                                    <input type="text" class="form-control input-sm option_goodssn_all" v-model="batchInput.option_goodssn">
                                    <span class="input-group-addon" @click="setCol('option_goodssn');">
                                        <a href="javascript:;" class="fa fa-angle-double-down" title="批量设置"></a>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th>
                            <div class="">
                                <div style="padding-bottom:10px;text-align:center;">条码</div>
                                <div class="input-group">
                                    <input type="text" class="form-control input-sm option_productsn_all" v-model="batchInput.option_productsn">
                                    <span class="input-group-addon" @click="setCol('option_productsn');">
                                        <a href="javascript:;" class="fa fa-angle-double-down" title="批量设置"></a>
                                    </span>
                                </div>
                            </div>
                        </th>
                        <th>
                            <div class="">
                                <div style="padding-bottom:10px;text-align:center;">重量（克）</div>
                                <div class="input-group">
                                    <input type="text" class="form-control input-sm option_weight_all" v-model="batchInput.option_weight">
                                    <span class="input-group-addon" @click="setCol('option_weight');">
                                        <a href="javascript:;" class="fa fa-angle-double-down" title="批量设置"></a>
                                    </span>
                                </div>
                            </div>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <template v-for="(item, index) in inputs">
                        <tr>
                            <!--
                            <td class="full" v-for="(n, specIndex) in specs.length"
                                v-if="showTd(specIndex, index)"
                                :rowspan="countSum(n)">
                                {{getSpecAttr(specIndex, index)}}
                            </td>
                            -->
                            <td class="full" v-for="(n, specIndex) in item.item">
                                {{ n.title }}
                            </td>
                            <td>
                                <input type="number" class="form-control option_stock" v-model="item.option_stock">
                            </td>
                            <td class="type-4"><input type="text" class="form-control option_marketprice" v-model="item.option_marketprice"></td>
                            <td class="type-4"><input type="text" class="form-control option_productprice"  v-model="item.option_productprice"></td>
                            <td class="type-4"><input type="text" class="form-control option_costprice"  v-model="item.option_costprice"></td>
                            <td><input type="text" class="form-control option_goodssn"  v-model="item.option_goodssn"></td>
                            <td><input type="text" class="form-control option_productsn"  v-model="item.option_productsn"></td>
                            <td><input type="number" class="form-control option_weight"  v-model="item.option_weight"></td>
                        </tr>
                    </template>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
</div>
</div>